<template>
  <div class="chart-container">
    <div class="chart-header" v-if="title">
      <h3 class="chart-title">{{ title }}</h3>
      <div class="chart-actions">
        <slot name="actions" />
      </div>
    </div>
    <div class="chart-content">
      <v-chart
        :option="chartOption"
        :style="{ width: '100%', height: height }"
        :loading="loading"
        autoresize
        @click="handleChartClick"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  LineChart,
  BarChart,
  PieChart,
  RadarChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components'

// 注册必要的组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent
])

interface Props {
  title?: string
  type: 'line' | 'bar' | 'pie' | 'radar'
  data: any[]
  labels?: string[]
  height?: string
  loading?: boolean
  colors?: string[]
}

interface Emits {
  (e: 'chartClick', params: any): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  height: '300px',
  loading: false,
  colors: () => ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1']
})

const emit = defineEmits<Emits>()

// 生成图表配置
const chartOption = computed(() => {
  const baseOption = {
    color: props.colors,
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      type: 'scroll',
      bottom: 0,
      textStyle: {
        fontSize: 12
      }
    }
  }

  switch (props.type) {
    case 'line':
      return {
        ...baseOption,
        tooltip: {
          ...baseOption.tooltip,
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: props.labels || props.data.map(item => item.name),
          axisLine: {
            lineStyle: {
              color: '#e8e8e8'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [{
          type: 'line',
          data: props.data.map(item => item.value),
          smooth: true,
          lineStyle: {
            width: 3
          },
          symbol: 'circle',
          symbolSize: 6
        }]
      }

    case 'bar':
      return {
        ...baseOption,
        tooltip: {
          ...baseOption.tooltip,
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: props.labels || props.data.map(item => item.name),
          axisLine: {
            lineStyle: {
              color: '#e8e8e8'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [{
          type: 'bar',
          data: props.data.map(item => item.value),
          barWidth: '60%',
          itemStyle: {
            borderRadius: [4, 4, 0, 0]
          }
        }]
      }

    case 'pie':
      return {
        ...baseOption,
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '45%'],
          data: props.data,
          label: {
            position: 'outside',
            fontSize: 12,
            formatter: '{b}: {c} ({d}%)'
          },
          labelLine: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }

    case 'radar':
      return {
        ...baseOption,
        radar: {
          indicator: props.labels?.map(label => ({ name: label })) || 
                    props.data.map(item => ({ name: item.name })),
          center: ['50%', '50%'],
          radius: '60%'
        },
        series: [{
          type: 'radar',
          data: [{
            value: props.data.map(item => item.value),
            areaStyle: {
              opacity: 0.3
            }
          }]
        }]
      }

    default:
      return baseOption
  }
})

const handleChartClick = (params: any) => {
  emit('chartClick', params)
}
</script>

<style scoped>
.chart-container {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-content {
  position: relative;
}
</style>